<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件中的data为什么是一个函数</title>
</head>
<body>
<div id="app">
    <comp1></comp1>
    <comp1></comp1>
    <comp1></comp1>
    <comp1></comp1>
</div>

<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    // import Vue from "vue";

    let obj = {
        conter:0
    }

    Vue.component("comp1",{
        template:`
            <div>
            <h2>{{conter}}</h2>
            <button @click="conter++">+</button>
            <button @click="conter--">-</button>
            </div>
        `,
        data(){
            return obj
        }
    })

    let app = new Vue({
        name:"app",
        el: "#app"
    });
    console.log(app);
</script>
<script>
   /* let obj = {
        a:1,
        b:2
    };
    function fn(){
        return obj;
    }

    let o1 = fn();
    let o2 = fn();
    o2.a = 100;
    // o1.a //==>100*/

   function fn(){
       return {
           a:1,
           b:2
       };
   }

   let o1 = fn();
   let o2 = fn();
   o2.a = 100;
   // o1.a //==>?


</script>
</body>
</html>